<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="门店设置"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    >
      <template #right>
        <view @click="saveSettings">保存</view>
      </template>
    </uni-nav-bar>

    <view class="content">
      <!-- 加载状态 -->
      <view v-if="merchantLoading" class="loading-container">
        <uni-load-more status="loading" />
      </view>

      <!-- 商户信息 -->
      <view v-else-if="merchantData" class="info-group">
        <!-- 门店名称 -->
        <view class="info-item">
          <text class="info-label">门店名称</text>
          <view class="info-value">
            <text>{{ storeInfo.merchantName || "暂无" }}</text>
          </view>
        </view>

        <!-- &lt;!&ndash; 分店名称 &ndash;&gt; -->
        <!-- <view class="info-item"> -->
        <!--   <text class="info-label">分店名称</text> -->
        <!--   <view class="info-value"> -->
        <!--     <text>{{ storeInfo.branchName || '暂无' }}</text> -->
        <!--   </view> -->
        <!-- </view> -->

        <!-- 门店类目 -->
        <view class="info-item" @click="selectCategory">
          <text class="info-label">门店类目</text>
          <view class="info-value">
            <text>{{ selectedCategoryName || "请选择经营类目" }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <!-- 门店logo -->
        <view class="info-item info-item-column">
          <text class="info-label">门店logo</text>
          <view class="info-value-full">
            <UploadMedia
              v-model="storeLogo"
              :max-count="1"
              upload-type="image"
              upload-text="上传门店logo"
              tip-text="建议尺寸：100x100px"
            />
          </view>
        </view>

        <!-- 门店大图 -->
        <view class="info-item info-item-column">
          <text class="info-label">门店大图</text>
          <view class="info-value-full">
            <UploadMedia
              v-model="storeLargePictureList"
              :max-count="1"
              upload-type="image"
              upload-text="上传门店大图"
              tip-text="建议尺寸：750x750px"
            />
          </view>
        </view>

        <!-- 营业时间 -->
        <view class="info-item" @click="showBusinessHoursPicker">
          <text class="info-label">营业时间</text>
          <view class="info-value">
            <text>{{ formData.storeBusinessHours || "请选择营业时间" }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>

        <!-- 联系电话 -->
        <view class="info-item">
          <text class="info-label">联系电话</text>
          <view class="info-value">
            <input
              type="text"
              v-model="formData.userMobile"
              :maxlength="11"
              class="text-right"
              placeholder="请输入联系电话"
            />
          </view>
        </view>

        <!-- 店铺地址 -->
        <view class="info-item" @click="selectAddress">
          <text class="info-label">店铺地址</text>
          <view class="info-value">
            <text>{{ formData.storeAddress || "请选择店铺地址" }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>

        <!-- 让利比率 -->
        <view class="info-item" @click="showRatioPicker">
          <text class="info-label">让利比率</text>
          <view class="info-value">
            <text>{{
              formData.offerDiscountsRatio !== null &&
              formData.offerDiscountsRatio !== undefined
                ? formData.offerDiscountsRatio + "%"
                : "请选择让利比率"
            }}</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>

        <!-- &lt;!&ndash; 审核状态 &ndash;&gt; -->
        <!-- <view class="info-item"> -->
        <!--   <text class="info-label">审核状态</text> -->
        <!--   <view class="info-value"> -->
        <!--     <text :class="getAuditStatusClass(storeInfo.isAudit)"> -->
        <!--       {{ getAuditStatusText(storeInfo.isAudit) }} -->
        <!--     </text> -->
        <!--   </view> -->
        <!-- </view> -->

        <!-- &lt;!&ndash; 签约查询 &ndash;&gt; -->
        <!-- <view class="info-item" @click="showContractInfo"> -->
        <!--   <text class="info-label">签约查询</text> -->
        <!--   <view class="info-value"> -->
        <!--     <uni-icons type="right" size="16" color="#999"></uni-icons> -->
        <!--   </view> -->
        <!-- </view> -->
      </view>

      <!-- 无数据提示 -->
      <view v-else class="empty-container">
        <text class="empty-text">暂无商户信息</text>
      </view>
    </view>

    <!-- 修改电话弹框 -->
    <uni-popup ref="phonePopup" type="center">
      <view class="phone-modal">
        <view class="modal-header">
          <text class="modal-title">修改联系电话</text>
          <uni-icons
            type="close"
            size="24"
            color="#666"
            @click="closePhoneModal"
          ></uni-icons>
        </view>
        <view class="modal-content">
          <view class="current-phone">
            <text class="label">现联系电话：</text>
            <text class="value">{{ storeInfo.phone }}</text>
          </view>
          <uni-easyinput
            v-model="newPhone"
            placeholder="请输入新的联系电话"
            type="number"
            :maxlength="11"
            :clearable="true"
          />
        </view>
        <view class="modal-footer">
          <view class="confirm-btn" @click="confirmPhoneChange">
            确认修改
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 签约信息弹框 -->
    <uni-popup ref="contractPopup" type="bottom">
      <view class="contract-modal">
        <view class="modal-header">
          <text class="modal-title">签约信息</text>
          <uni-icons
            type="close"
            size="24"
            color="#666"
            @click="closeContractInfo"
          ></uni-icons>
        </view>
        <view class="modal-content">
          <view class="contract-item">
            <text class="contract-label">签约时间：</text>
            <view class="contract-value">
              <text>{{ contractInfo.startTime }}</text>
              <text class="time-separator">-</text>
              <text>{{ contractInfo.endTime }}</text>
            </view>
          </view>
          <view class="contract-item">
            <text class="contract-label">积分结算模式：</text>
            <text class="contract-value">{{
              contractInfo.settlementMode
            }}</text>
          </view>
          <view class="contract-item">
            <text class="contract-label">积分比例：</text>
            <text class="contract-value">{{ contractInfo.pointsRatio }}</text>
          </view>
          <view class="contract-tip">
            * 如需修改签约模式积分比例，请联系客服或当地商务人员
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 营业时间选择弹框 -->
    <uni-popup ref="businessHoursPopup" type="bottom">
      <view class="time-picker-modal">
        <view class="picker-header">
          <text class="picker-cancel" @click="closeBusinessHoursPicker"
            >取消</text
          >
          <text class="picker-title">选择营业时间</text>
          <text class="picker-confirm" @click="confirmBusinessHours">确定</text>
        </view>
        <view class="time-picker-content">
          <view class="time-row">
            <text class="time-label">开始时间</text>
            <picker mode="time" :value="startTime" @change="onStartTimeChange">
              <view class="time-value">
                <text>{{ startTime }}</text>
                <uni-icons type="right" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
          <view class="time-row">
            <text class="time-label">结束时间</text>
            <picker mode="time" :value="endTime" @change="onEndTimeChange">
              <view class="time-value">
                <text>{{ endTime }}</text>
                <uni-icons type="right" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 让利比率选择弹框 -->
    <uni-popup ref="ratioPopup" type="bottom">
      <view class="ratio-picker-modal">
        <view class="picker-header">
          <text class="picker-cancel" @click="closeRatioPicker">取消</text>
          <text class="picker-title">让利比率</text>
          <text class="picker-confirm" @click="confirmRatio">确定</text>
        </view>
        <picker-view
          class="picker-view"
          :value="pickerValue"
          @change="pickerChange"
          :indicator-style="indicatorStyle"
        >
          <picker-view-column>
            <view
              v-for="(ratio, index) in ratioOptions"
              :key="index"
              class="picker-item"
            >
              {{ ratio }}%
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>

    <!-- 经营类目选择弹框 -->
    <CategoryPicker ref="categoryPickerRef" @confirm="handleCategoryConfirm" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRequest } from "ahooks-vue";
import { hardReloadToHome } from "@/utils/hardReload";
import { getMerchantInfo, updateStoreInfo } from "@/api/mine";
import { useUserStore } from "@/store/modules/user";
import { useStoreStore } from "@/store/modules/store";
import { useAutoRefresh } from "@/composables/useAutoRefresh";
import UploadMedia from "@/components/UploadMedia/UploadMedia.vue";
import CategoryPicker from "@/components/common/CategoryPicker/CategoryPicker.vue";

// 使用 Pinia store
const userStore = useUserStore();
const storeStore = useStoreStore();

// 商户原始数据
const merchantData = ref(null);

// 编辑表单数据
const formData = ref({
  classifyId: null,
  merchantId: "",
  offerDiscountsRatio: null,
  storeAddress: "",
  storeBusinessHours: "",
  storeLargePicture: "",
  storeLogo: "", // 门店logo
  storeLatitude: "",
  storeLongitude: "",
  userId: "",
  userMobile: "", // 联系电话
});

// 门店logo列表（用于 UploadMedia 组件）
const storeLogo = computed({
  get: () => {
    if (!formData.value.storeLogo) return [];
    return [{ url: formData.value.storeLogo, type: "image" }];
  },
  set: (val) => {
    formData.value.storeLogo = val.length > 0 ? val[0].url : "";
  },
});

// 门店大图列表（用于 UploadMedia 组件）
const storeLargePictureList = computed({
  get: () => {
    if (!formData.value.storeLargePicture) return [];
    return [{ url: formData.value.storeLargePicture, type: "image" }];
  },
  set: (val) => {
    formData.value.storeLargePicture = val.length > 0 ? val[0].url : "";
  },
});

// 营业时间弹框
const businessHoursPopup = ref(null);
const startTime = ref("09:00");
const endTime = ref("22:00");

// 让利比率弹框
const ratioPopup = ref(null);
const ratioOptions = ref([]);
const pickerValue = ref([0]);
const selectedRatioValue = ref(3);
const indicatorStyle = "height: 50px;";

// 经营类目选择器
const categoryPickerRef = ref(null);
const selectedCategoryName = ref("");

// 店铺信息（计算属性，从 merchantData 中提取）
const storeInfo = computed(() => {
  if (!merchantData.value) {
    return {
      merchantName: "",
      branchName: "",
      classifyName: "",
      storeLargePicture: "",
      storePhotos: [],
      storeBusinessHours: "",
      userMobile: "",
      fullAddress: "",
      offerDiscountsRatio: null,
      isAudit: -1,
    };
  }

  const data = merchantData.value;

  // 处理门店图片（storePicture1, storePicture2, storePicture3）
  const storePhotos = [];
  if (data.storePicture1 && data.storePicture1.trim()) {
    storePhotos.push(data.storePicture1.trim());
  }
  if (data.storePicture2 && data.storePicture2.trim()) {
    storePhotos.push(data.storePicture2.trim());
  }
  if (data.storePicture3 && data.storePicture3.trim()) {
    storePhotos.push(data.storePicture3.trim());
  }

  // 拼接完整地址
  const addressParts = [];
  if (data.province) addressParts.push(data.province);
  if (data.city) addressParts.push(data.city);
  if (data.district) addressParts.push(data.district);
  if (data.storeAddress) addressParts.push(data.storeAddress);
  const fullAddress = addressParts.join("");

  return {
    merchantName: data.merchantName || "",
    branchName: data.branchName || "",
    classifyName: data.classifyName || "",
    storeLargePicture: data.storeLargePicture || "",
    storePhotos: storePhotos,
    storeBusinessHours: data.storeBusinessHours || "",
    userMobile: data.userMobile || "",
    fullAddress: fullAddress || "",
    offerDiscountsRatio: data.offerDiscountsRatio,
    isAudit: data.isAudit ?? -1,
  };
});

// 获取商户信息
const {
  data: merchantResponse,
  loading: merchantLoading,
  run: getMerchantInfoRun,
} = useRequest(
  () =>
    getMerchantInfo({
      merchantId: storeStore.storeId,
      userId: userStore.userId,
    }),
  {
    manual: true,
    onSuccess: (response) => {
      console.log("获取商户信息成功：", response);
      if (response && response.data) {
        merchantData.value = response.data;

        // 初始化表单数据（将小数转换为百分比显示）
        formData.value = {
          classifyId: response.data.classifyId || null,
          merchantId: response.data.id || storeStore.storeId,
          offerDiscountsRatio: response.data.offerDiscountsRatio
            ? Math.round(response.data.offerDiscountsRatio * 100)
            : null,
          storeAddress: response.data.storeAddress || "",
          storeBusinessHours: response.data.storeBusinessHours || "",
          storeLargePicture: response.data.storeLargePicture || "",
          storeLogo: response.data.storeLogo || "", // 初始化门店logo
          storeLatitude: response.data.storeLatitude || "",
          storeLongitude: response.data.storeLongitude || "",
          userId: response.data.userId || userStore.userId,
          userMobile: response.data.userMobile || "",
        };

        // 初始化营业时间
        if (response.data.storeBusinessHours) {
          const times = response.data.storeBusinessHours.split("-");
          if (times.length === 2) {
            startTime.value = times[0].trim();
            endTime.value = times[1].trim();
          }
        }

        // 初始化经营类目名称
        selectedCategoryName.value = response.data.classifyName || "";
      }
    },
    onError: (error) => {
      console.error("获取商户信息失败：", error);
      uni.showToast({
        title: "获取商户信息失败",
        icon: "none",
      });
    },
  },
);

// 更新店铺信息
const { loading: updateLoading, run: updateStoreInfoRun } = useRequest(
  (data) => updateStoreInfo(data),
  {
    manual: true,
    onSuccess: (response) => {
      uni.showToast({
        title: "保存成功",
        icon: "none",
        duration: 1500,
      });

      // 延迟后跳转到首页并刷新整个应用
      setTimeout(() => {
        goback();
      }, 1500);
    },
    onError: (error) => {
      console.error("更新店铺信息失败：", error);
      uni.showToast({
        title: "保存失败",
        icon: "none",
      });
    },
  },
);

// 弹框引用
const phonePopup = ref(null);
const contractPopup = ref(null);

// 新电话号码
const newPhone = ref("");

// 签约信息（计算属性，从 merchantData 中提取）
const contractInfo = computed(() => {
  if (!merchantData.value) {
    return {
      startTime: "",
      endTime: "",
      settlementMode: "",
      pointsRatio: "",
    };
  }

  const data = merchantData.value;

  // 结算模式映射
  const settlementModeMap = {
    1: "全局模式",
    2: "自定义模式",
  };

  return {
    startTime: data.contractStartTime || "",
    endTime: data.contractEndTime || "",
    settlementMode: settlementModeMap[data.settlementMode] || "未知",
    pointsRatio: data.offerDiscountsRatio ? `${data.offerDiscountsRatio}%` : "",
  };
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 预览图片
const previewImage = (current, urls) => {
  uni.previewImage({
    current: current,
    urls: urls,
  });
};

// 获取审核状态文本
const getAuditStatusText = (status) => {
  const statusMap = {
    "-1": "未申请",
    0: "审核中",
    1: "已通过",
    2: "已拒绝",
  };
  return statusMap[String(status)] || "未知";
};

// 获取审核状态样式类
const getAuditStatusClass = (status) => {
  const classMap = {
    "-1": "status-not-apply",
    0: "status-pending",
    1: "status-approved",
    2: "status-rejected",
  };
  return classMap[String(status)] || "";
};

// 跳转到营业时间设置页面
const goToBusinessHours = () => {
  uni.navigateTo({
    url: "/pages/mine/storeSettings/businessHours",
  });
};

// 显示修改电话弹框
const showPhoneModal = () => {
  newPhone.value = "";
  phonePopup.value?.open();
};

// 关闭修改电话弹框
const closePhoneModal = () => {
  phonePopup.value?.close();
};

// 确认修改电话
const confirmPhoneChange = () => {
  if (!newPhone.value) {
    uni.showToast({
      title: "请输入新的联系电话",
      icon: "none",
    });
    return;
  }

  if (!/^1[3-9]\d{9}$/.test(newPhone.value)) {
    uni.showToast({
      title: "请输入正确的手机号码",
      icon: "none",
    });
    return;
  }

  uni.showToast({
    title: "修改成功",
    icon: "none",
  });
  closePhoneModal();
};

// 跳转到店铺地址页面
const goToStoreAddress = () => {
  uni.navigateTo({
    url: "/pages/mine/storeSettings/storeAddress",
  });
};

// 显示签约信息
const showContractInfo = () => {
  contractPopup.value?.open();
};

// 关闭签约信息
const closeContractInfo = () => {
  contractPopup.value?.close();
};

// 显示营业时间选择器
const showBusinessHoursPicker = () => {
  businessHoursPopup.value?.open();
};

// 关闭营业时间选择器
const closeBusinessHoursPicker = () => {
  businessHoursPopup.value?.close();
};

// 开始时间改变
const onStartTimeChange = (e) => {
  startTime.value = e.detail.value;
};

// 结束时间改变
const onEndTimeChange = (e) => {
  endTime.value = e.detail.value;
};

// 确认营业时间
const confirmBusinessHours = () => {
  if (!startTime.value || !endTime.value) {
    uni.showToast({
      title: "请选择完整的营业时间",
      icon: "none",
    });
    return;
  }

  // 格式化为 HH:mm-HH:mm
  formData.value.storeBusinessHours = `${startTime.value}-${endTime.value}`;
  closeBusinessHoursPicker();
};

// 初始化让利比率选项（3% - 20%）
const initRatioOptions = () => {
  const options = [];
  for (let i = 3; i <= 20; i++) {
    options.push(i);
  }
  ratioOptions.value = options;
};

// 显示让利比率选择器
const showRatioPicker = () => {
  if (ratioOptions.value.length === 0) {
    initRatioOptions();
  }

  // 设置当前选中的比率
  const currentRatio = formData.value.offerDiscountsRatio || 3;
  const currentIndex = ratioOptions.value.indexOf(currentRatio);
  pickerValue.value = [currentIndex >= 0 ? currentIndex : 0];
  selectedRatioValue.value =
    currentIndex >= 0
      ? ratioOptions.value[currentIndex]
      : ratioOptions.value[0];

  ratioPopup.value?.open();
};

// 关闭让利比率选择器
const closeRatioPicker = () => {
  ratioPopup.value?.close();
};

// picker值改变
const pickerChange = (e) => {
  const index = e.detail.value[0];
  selectedRatioValue.value = ratioOptions.value[index];
};

// 确认让利比率
const confirmRatio = () => {
  formData.value.offerDiscountsRatio = selectedRatioValue.value;
  closeRatioPicker();
};

// 选择经营类目
const selectCategory = () => {
  const currentCategory = formData.value.classifyId
    ? {
        id: formData.value.classifyId,
        name: selectedCategoryName.value,
      }
    : null;
  categoryPickerRef.value?.open(currentCategory);
};

// 类目选择确认
const handleCategoryConfirm = (category) => {
  console.log("选择的类目：", category);
  formData.value.classifyId = category.id;
  selectedCategoryName.value = category.name;
};

// 选择店铺地址
const selectAddress = () => {
  // 跳转到地址选择页面，传递当前地址信息
  uni.navigateTo({
    url: `/pages/mine/storeSettings/storeAddress?address=${encodeURIComponent(
      formData.value.storeAddress || "",
    )}&longitude=${formData.value.storeLongitude || ""}&latitude=${
      formData.value.storeLatitude || ""
    }`,
  });
};

// 监听地址选择事件
onMounted(() => {
  uni.$on("selectAddress", (data) => {
    console.log("接收到选择的地址：", data);
    formData.value.storeAddress = data.address;
    formData.value.storeLongitude = data.longitude;
    formData.value.storeLatitude = data.latitude;
  });
});

// 上传门店大图（已废弃，使用 UploadMedia 组件）
const uploadStoreLargePicture = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];

      // 显示加载提示
      uni.showLoading({
        title: "上传中...",
      });

      // 上传图片
      uni.uploadFile({
        url: import.meta.env.VITE_API_BASE_URL + "/upload/image",
        filePath: tempFilePath,
        name: "file",
        header: {
          token: userStore.token,
        },
        success: (uploadRes) => {
          const data = JSON.parse(uploadRes.data);
          if (data.code === 200) {
            formData.value.storeLargePicture = data.data.url;
            uni.showToast({
              title: "上传成功",
              icon: "success",
            });
          } else {
            uni.showToast({
              title: data.msg || "上传失败",
              icon: "none",
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: "上传失败",
            icon: "none",
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
  });
};

// 保存设置
const saveSettings = () => {
  if (updateLoading.value) {
    return;
  }

  // 验证必填字段
  if (!formData.value.storeAddress) {
    uni.showToast({
      title: "请填写门店地址",
      icon: "none",
    });
    return;
  }

  if (!formData.value.storeBusinessHours) {
    uni.showToast({
      title: "请选择营业时间",
      icon: "none",
    });
    return;
  }

  // 验证联系电话
  if (formData.value.userMobile) {
    if (!/^1[3-9]\d{9}$/.test(formData.value.userMobile)) {
      uni.showToast({
        title: "请输入正确的手机号码",
        icon: "none",
      });
      return;
    }
  }

  // 验证让利比率
  if (
    formData.value.offerDiscountsRatio !== null &&
    formData.value.offerDiscountsRatio !== undefined
  ) {
    const ratio = Number(formData.value.offerDiscountsRatio);
    if (isNaN(ratio) || ratio < 0 || ratio > 100) {
      uni.showToast({
        title: "让利比率必须在0-100之间",
        icon: "none",
      });
      return;
    }
  }

  // 确认保存
  uni.showModal({
    title: "提示",
    content: "确认保存店铺信息？",
    success: (res) => {
      if (res.confirm) {
        // 准备提交数据（只提交 API 需要的字段）
        const submitData = {
          classifyId: formData.value.classifyId,
          merchantId: String(formData.value.merchantId), // 确保是字符串
          offerDiscountsRatio: formData.value.offerDiscountsRatio
            ? Number(formData.value.offerDiscountsRatio) / 100
            : null,
          storeAddress: formData.value.storeAddress,
          storeBusinessHours: formData.value.storeBusinessHours,
          storeLargePicture: formData.value.storeLargePicture,
          storeLogo: formData.value.storeLogo, // 提交门店logo
          storeLatitude: formData.value.storeLatitude,
          storeLongitude: formData.value.storeLongitude,
          userId: formData.value.userId,
          userMobile: formData.value.userMobile, // 提交联系电话
        };

        console.log("提交的数据：", submitData);

        // 调用更新接口
        updateStoreInfoRun(submitData);
      }
    },
  });
};

// 使用自动刷新（店铺切换时会自动刷新）
useAutoRefresh(() => {
  if (storeStore.storeId && userStore.userId) {
    getMerchantInfoRun();
  } else {
    console.warn("缺少商户ID或用户ID，无法加载商户信息");
    uni.showToast({
      title: "缺少必要信息，请先登录",
      icon: "none",
    });
  }
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  height: 0;
  margin-top: 88rpx;
}

.content {
  padding: 20rpx 30rpx;
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

// 空状态
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

// 信息组
.info-group {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 32rpx;
}

// 信息项
.info-item {
  padding: 32rpx 0;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    opacity: 0.7;
  }
}

// 信息项（纵向布局）
.info-item-column {
  flex-direction: column;
  align-items: flex-start;
  gap: 16rpx;

  &:active {
    opacity: 1;
  }
}

.info-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  min-width: 140rpx;
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rpx;

  text {
    font-size: 28rpx;
    color: #666;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 信息值（全宽）
.info-value-full {
  width: 100%;
}

// 审核状态样式
.status-not-apply {
  color: #999 !important;
}

.status-pending {
  color: #ff9500 !important;
}

.status-approved {
  color: #34c759 !important;
}

.status-rejected {
  color: #ff3b30 !important;
}

.address-text {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 图片上传容器
.image-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12rpx;
}

// 上传占位符
.upload-placeholder {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  border: 2rpx dashed #ddd;

  &:active {
    opacity: 0.8;
  }
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

// 上传按钮
.upload-btn {
  padding: 8rpx 16rpx;
  background-color: #ffbb00;
  border-radius: 8rpx;

  text {
    font-size: 24rpx;
    color: #fff;
  }

  &:active {
    opacity: 0.8;
  }
}

// 店铺LOGO
.store-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  flex-shrink: 0;

  &:active {
    opacity: 0.8;
  }
}

// 让利比率输入容器
.ratio-input-container {
  display: flex;
  align-items: center;
  gap: 8rpx;
  flex: 1;
}

.ratio-unit {
  font-size: 28rpx;
  color: #333;
  margin-left: -8rpx;
}

.ratio-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

// 照片列表
.photos-list {
  display: flex;
  gap: 12rpx;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.photo-item {
  width: 120rpx;
  height: 90rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  flex-shrink: 0;

  &:active {
    opacity: 0.8;
  }
}

// 内景照
.interior-photos {
  display: flex;
  gap: 12rpx;
  flex: 1;
  justify-content: flex-end;
}

.interior-photo {
  width: 120rpx;
  height: 90rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  flex-shrink: 0;

  &:active {
    opacity: 0.8;
  }
}

// 修改电话弹框
.phone-modal {
  background: #fff;
  border-radius: 16rpx;
  width: 600rpx;
  overflow: hidden;

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .modal-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
  }

  .modal-content {
    padding: 32rpx;
  }

  .current-phone {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .label {
      font-size: 28rpx;
      color: #666;
    }

    .value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }

  .modal-footer {
    padding: 0 32rpx 32rpx;
  }

  .confirm-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #faa820;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    border-radius: 12rpx;

    &:active {
      opacity: 0.8;
    }
  }
}

// 签约信息弹框
.contract-modal {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .modal-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
  }

  .modal-content {
    padding: 32rpx;
  }

  .contract-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;

    &:last-of-type {
      margin-bottom: 32rpx;
    }
  }

  .contract-label {
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
  }

  .contract-value {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    text-align: right;

    .time-separator {
      margin: 0 8rpx;
    }
  }

  .contract-tip {
    font-size: 24rpx;
    color: #ff9500;
    line-height: 1.6;
  }
}

// 营业时间选择器
.time-picker-modal {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.time-picker-content {
  padding: 32rpx;
}

.time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.time-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.time-value {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;

  text {
    font-size: 28rpx;
    color: #333;
  }

  &:active {
    opacity: 0.7;
  }
}

// 让利比率选择器
.ratio-picker-modal {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-cancel {
  font-size: 28rpx;
  color: #666;

  &:active {
    opacity: 0.6;
  }
}

.picker-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.picker-confirm {
  font-size: 28rpx;
  color: #ffbb00;

  &:active {
    opacity: 0.6;
  }
}

.picker-view {
  height: 400rpx;
  padding: 0 32rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  line-height: 50px;
  font-size: 32rpx;
  color: #333;
}
</style>
